<template>
    <div class="layui-form layui-form-pane layui-tab-item layui-show">
      <validation-observer ref="observer" v-slot="{ validate }">
        <div class="layui-form-item">
          <validation-provider
            name="password"
            rules="required|min:6|"
            v-slot="{errors}"
            vid="confirmation"
          >
            <div class="layui-row">
              <label for="L_nowpass" class="layui-form-label">原密码</label>
              <div class="layui-input-inline">
                <input
                  type="password"
                  name="nowpass"
                  v-model="nowpassword"
                  placeholder="请输入原密码"
                  autocomplete="off"
                  class="layui-input"
                />
              </div>
              <div class="layui-form-mid layui-word-aux"></div>
            </div>
            <div class="layui-row">
              <span style="color: #c00;">{{errors[0]}}</span>
            </div>
          </validation-provider>
        </div>
          <div class="layui-form-item">
            <validation-provider
              name="password"
              rules="required|min:6|"
              v-slot="{errors}"
              vid="confirmation"
            >
              <div class="layui-row">
                <label for="L_pass" class="layui-form-label">新密码</label>
                <div class="layui-input-inline">
                  <input
                    type="password"
                    name="password"
                    v-model="password"
                    placeholder="请输入密码"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
                <div class="layui-form-mid layui-word-aux"></div>
              </div>
              <div class="layui-row">
                <span style="color: #c00;">{{errors[0]}}</span>
              </div>
            </validation-provider>
          </div>
          <div class="layui-form-item">
            <validation-provider v-slot="{ errors }" rules="required|confirmed:confirmation">
              <div class="layui-row">
                <label for="L_repass" class="layui-form-label">确认密码</label>
                <div class="layui-input-inline">
                  <input
                    type="password"
                    name="repassword"
                    v-model="repassword"
                    placeholder="请输入确认密码"
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
              <div class="layui-row">
                <span style="color: #c00;">{{errors[0]}}</span>
              </div>
            </validation-provider>
          </div>
          <div class="layui-form-item">
            <button class="layui-btn"   @click="validate().then(submit)">确认修改</button>
          </div>
      </validation-observer>
      </div>
</template>

<script>
  import axios from 'axios'
  import { updateWord } from '@/api/user'
  // import { updateUserInfo }  from '@/api/user'
  import { ValidationProvider ,ValidationObserver} from 'vee-validate'
export default {
    name: 'passwd',
    components: {
      ValidationProvider,
      ValidationObserver
    },
    props: {

    },
    data() {
        return {
          nowpassword: '',
          password: '',
          repassword: ''
        };
    },
    computed: {

    },
    created() {
      

    },
    mounted() {

    },
    watch: {

    },
    methods: {
      async submit(){
      const isValid = await this.$refs.observer.validate()
      if (!isValid) {
        // ABORT!!
        return
      }
      if(this.nowpassword ===this.password){
        this.$alert('新旧密码不能相同哦')
        return
      }
      updateWord({
        nowpassword:this.nowpassword,
        password:this.password,
        repassword:this.repassword
      }).then((res)=>{
        if (res.code === 200){
          this.$alert('更改密码成功，请重新登录')
          localStorage.clear()
          this.$store.commit('setToken', '')
          this.$store.commit('setUserInfo', '')
          this.$store.commit('setIslogin', false)
          this.$router.push('/login',()=>{})

        }else{
          if(res.code === 404){
            this.$alert('原始密码不匹配，请重新输入')
          this.nowpassword = ''
          this.password = ''
          this.repassword = ''
          requestAnimationFrame(() => {
            this.$refs.observer.reset()
          })
          }
        }
      })
    }
    },
};
</script>

<style scoped lang="scss">

</style>
